<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />


  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Electrolux</title>
  <link rel="stylesheet" href="../../index.css" />
  <style>
    .justify-end .justify-center {
      justify-content: flex-end;
    }

    .page {
      background-color: #252c32;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }

    .header {
      padding: 2.402vh;
      background-color: #1b1b1b;
      height: 6.907vh;
    }

    .image {
      /* width: 3.003vh;
  height: 3.003vh; */
    }

    .pos {
      position: absolute;
      left: 2.402vh;
      top: 50%;
      transform: translateY(-50%);
    }

    .text {
      color: #ffffff;
      font-size: 2.102vh;
      font-family: SourceHanSansCN;
      font-weight: 700;
      line-height: 1.952vh;
    }

    .group {
      padding: 3.168vh 5.105vh 8.859vh;
      overflow-y: auto;
    }

    .space-y-160>*:not(:first-child) {
      margin-top: 6.024vh;
    }

    .space-y-8>*:not(:first-child) {
      margin-top: 1.201vh;
    }

    .image_2 {
      width: 12.462vh;
      height: 12.462vh;
    }

    .text_2 {
      color: #ffffff;
      font-size: 3.304vh;
      font-family: SourceHanSansCN;
      line-height: 3.303vh;
    }

    .space-y-20>*:not(:first-child) {
      margin-top: 3.003vh;
    }

    .font_1 {
      font-size: 1.802vh;
      font-family: SourceHanSansCN;
      line-height: 1.351vh;
      color: #ffffff;
    }

    .text_3 {
      line-height: 1.652vh;
    }

    .space-x-8>*:not(:first-child) {
      margin-left: 1.201vh;
    }

    .space-y-18>*:not(:first-child) {
      margin-top: 2.703vh;
    }

    .button {
      padding: 2.402vh 0;
      background-color: #ff0059;
      border-radius: 1.201vh;
    }

    .font_2 {
      font-size: 1.802vh;
      font-family: SourceHanSansCN;
      line-height: 1.727vh;
      font-weight: 700;
      color: #ffffff;
    }

    .button_2 {
      padding: 2.402vh 0;
      background-color: #7b7b7b;
      border-radius: 1.201vh;
    }

    .title {
      color: white;
      font-weight: 600;
      font-size: 1.04rem;
      margin-bottom: 1.5rem;
      margin-top: -1.5rem;
    }

    .m_5 {
      margin-top: 1rem;
    }

    .title_text {
      color: white;
      font-weight: 100;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }

    .begin_time_title {
      color: white;
      font-size: 1.0rem;
      margin-top: -0.2rem;
      margin-bottom: 1.2rem;
    }

    .end_time_title {
      color: white;
      font-size: 0.9rem;
    }

    .begin_time {
      background: #1B1B1B;
      border-radius: 14px;
      padding: 3.202vh 0;
      border-radius: 1.201vh;
      text-align: center;
      margin-top: 25px;
    }

    .description {
      height: 8rem;
      border-radius: 1.201vh;
      background: #1B1B1B;
      width: 100%;
      color: white;
      outline: none;
      font-size: 0.91rem;
    }

    .select_pirture {
      background: #1B1B1B;
      width: 100%;
      padding: 1.902vh 0;
      border-radius: 1.201vh;
      text-align: center;
      line-height: 100%;
    }

    .select_text {
      /* display: flex; */
      color: white;
      font-size: 0.95rem;
      white-space: nowrap;
      overflow-x: auto;
    }

    .button_item {
      flex: 1;
      margin: 0;
      padding: 0;
      width: 5rem;
      height: 2rem;
      background: rgb(64, 128, 255);
      display: inline-block;
      border-radius: 2px;
      color: white;
    }

    /* .title:nth-child(1){
    margin-top:1rem ;
   } */
    .mt-1 {
      margin-top: 2rem;
    }

    html {
      font-size: 16px;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      width: 100%;
      height: 100vh;
    }

    body * {
      box-sizing: border-box;
      flex-shrink: 0;
    }

    * {
      margin: 0px;
      padding: 0px;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
    }

    .flex-col {
      display: flex;
      flex-direction: column;
    }

    .justify-start {
      justify-content: flex-start;
    }

    .justify-end {
      justify-content: flex-end;
    }

    .justify-center {
      justify-content: center;
    }

    .justify-between {
      justify-content: space-between;
    }

    .justify-around {
      justify-content: space-around;
    }

    .justify-evenly {
      justify-content: space-evenly;
    }

    .items-start {
      align-items: flex-start;
    }

    .items-end {
      align-items: flex-end;
    }

    .items-center {
      align-items: center;
    }

    .items-baseline {
      align-items: baseline;
    }

    .items-stretch {
      align-items: stretch;
    }

    .self-start {
      align-self: flex-start;
    }

    .self-end {
      align-self: flex-end;
    }

    .self-center {
      align-self: center;
    }

    .self-baseline {
      align-self: baseline;
    }

    .self-stretch {
      align-self: stretch;
    }

    .flex-1 {
      flex: 1 1 0%;
    }

    .flex-auto {
      flex: 1 1 auto;
    }

    .grow {
      flex-grow: 1;
    }

    .grow-0 {
      flex-grow: 0;
    }

    .shrink {
      flex-shrink: 1;
    }

    .shrink-0 {
      flex-shrink: 0;
    }

    .relative {
      position: relative;
    }
  </style>
</head>

<body>
  <div class="flex-col page">
    <div class="flex-row justify-center items-center relative header">
      <img class="image pos" src="../../img/back.png" />
      <span class="text">补充测试记录</span>
    </div>

    <div class="flex-col flex-auto group space-y-160 ">
      <div class="test_box mt-1">

        <div class="title">测试内容</div>
        <div class="title_text">开始测试时间</div>
        <button></button>




        <div class="title_text">结束测试时间</div>
        <button></button>
      </div>

      <!-- 测试内容 -->
      <div class="test_box">

        <div class="title">测试内容</div>
        <div class="title_text">测试项目</div>
        <select name="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel" selected>Opel</option>
          <option value="audi">Audi</option>
        </select>

        <div class="title_text">速度模式</div>
        <div class="button_list">
          <button class="button_item">ss11</button>
          <button class="button_item">ss</button>
          <button class="button_item">ss</button>

        </div>


        <div class="title_text">测试结果</div>
        <div class="button_list">
          <button class="button_item">ss11</button>
          <button class="button_item">ss</button>
          <button class="button_item">ss</button>

        </div>
      </div>
      <!-- 附加内容 -->
      <div class="test_box">

        <div class="title">附加内容</div>
        <div class="title_text">失败原因（选填）</div>
        <select name="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel" selected>Opel</option>
          <option value="audi">Audi</option>
        </select>

        <div class="title_text">附加说明</div>
        <textarea class="description"></textarea>

        <div class="title_text">照片附件</div>
        <div class="select_pirture">
          <img src="../../img/select.png" alt="">
          <span class="select_text">选择照片</span>
        </div>

      </div>
      <div class="flex-col space-y-20">

        <div class="flex-col space-y-18">
          <div class="flex-col justify-start items-center button"><span class="font_2">点击此处结束测试</span></div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>